<template>
    <div ref="rightMenu" class="fixed z-50 shadow-lg w-52 rounded-lg bg-white select-none">
        <ul class="grid py-2">
            <li class="pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all">
                <i class="iconfont icon-xiaoxi mr-2 text-[var(--playBg)]"></i>
                <div class="text-[var(--text)]">查看评论</div>
            </li>
            <li class="pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all" @click="playMusic">
                <i class="iconfont icon-bofang mr-2 text-[var(--playBg)]"></i>
                <div class="text-[var(--text)]">播放</div>
            </li>
            <li @click="nextPlay" class="border-b pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all">
                <i class="iconfont icon-Playlists-xiayishoubofang mr-2 text-[var(--playBg)]"></i>
                <div class="text-[var(--text)]">下一首播放</div>
            </li>
            <li class="pl-2 py-1 flex hover:bg-[var(--hoverBg)] relative transition-all group/item">
                <i class="iconfont icon-shoucang mr-2 text-[var(--playBg)]"></i>
                <div>
                    <span class="text-[var(--text)]">收藏到歌单</span>
                    <i class="iconfont icon-24gf-play before:text-xs ml-[4.5rem]"></i>
                </div>
                <!-- 收藏歌单的子菜单 -->
                <div class="px-2 absolute top-0 left-full w-full h-fit transition-all hidden group-hover/item:block">
                    <ul class="bg-white rounded-lg py-2">
                        <li class="border-b pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all">
                            <i class="iconfont icon-chuangjian mr-2"></i>
                            <div class="text-[var(--text)]">创建新歌单</div>
                        </li>
                        <li class="pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all">
                            <i class="iconfont icon-yinfu mr-2"></i>
                            <div class="text-[var(--text)]">我喜欢的音乐</div>
                        </li>
                    </ul>
                </div>
            </li>
            <li @click="openShare" class="pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all">
                <i class="iconfont icon-zhuanfa mr-2 text-[var(--playBg)]"></i>
                <div class="text-[var(--text)]">分享</div>
            </li>
            <li @click="copyLink" class="pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all">
                <i class="iconfont icon-lianjie mr-2 text-[var(--playBg)]"></i>
                <div class="text-[var(--text)]">复制链接</div>
            </li>
            <li @click="downloadMusic" class="pl-2 py-1 flex hover:bg-[var(--hoverBg)] transition-all">
                <i class="iconfont icon-xiazai mr-2 text-[var(--playBg)]"></i>
                <div class="text-[var(--text)]">下载</div>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, ref } from 'vue'
import { songInfo } from '@renderer/store/modules/eveylSong/type'
import { ElMessage, ElNotification } from 'element-plus';
const { ipcRenderer } = require('electron');
const props = defineProps<{
    musicInfo: songInfo
}>()
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const musicId = ref(sessionStorage.getItem('playMusicId'))
const playList: songInfo[] = JSON.parse(localStorage.getItem('playList') as string)
// 播放音乐
const playMusic = () => {
    if (playList.findIndex((item: songInfo) => item.id == props.musicInfo.id) == -1) {
        playList.unshift(props.musicInfo);
        localStorage.setItem('playList', JSON.stringify(playList));
    }
    bus.emit('MusicInfo', props.musicInfo)
}
// 插入下一首到播放列表
function _insertAfterIndex(arr: songInfo[], index: number, value: songInfo) {
    if (arr.length == 0) {
        arr.push(value)
    } else {
        arr.splice(index + 1, 0, value);
    }
}
// 如果数组中存在了下一首播放的歌曲直接移动到下一首
function _moveSong(arr: songInfo[], fromIndex: number, toIndex: number) {
    if (fromIndex < toIndex) {
        let temp = arr[fromIndex];
        for (let i = fromIndex; i < toIndex; i++) {
            arr[i] = arr[i + 1];
        }
        arr[toIndex] = temp;
    } else if (fromIndex > toIndex) {
        let temp = arr[fromIndex];
        for (let i = fromIndex; i > toIndex + 1; i--) {
            arr[i] = arr[i - 1];
        }
        arr[toIndex + 1] = temp;
    }
}
// 下一首播放
const nextPlay = () => {
    if (playList.length == 0) {
        playList.push(props.musicInfo)
        localStorage.setItem('playList', JSON.stringify(playList));
    } else {
        // 当前播放的歌曲在播放列表中的位置
        let index = playList.findIndex((item: songInfo) => item.id == musicId.value)
        // 重复歌曲在播放列表中的位置
        let rIndex = playList.findIndex((item: songInfo) => item.id == props.musicInfo.id)
        if (playList.findIndex((item: songInfo) => item.id == props.musicInfo.id) !== -1) {
            _moveSong(playList, rIndex, index)
        } else {
            _insertAfterIndex(playList, index, props.musicInfo)
        }
        localStorage.setItem('playList', JSON.stringify(playList));
    }
    bus.emit('updatePlayList')
    ElNotification.success({
        title: '提示',
        message: `已成功添加至播放列表：${props.musicInfo.name}`,
        offset: 100,
        duration: 1500
    })
}
// 下载音乐
const downloadMusic = () => {
    if (props.musicInfo.privilege?.freeTrialPrivilege.cannotListenReason == 0 || !props.musicInfo.privilege?.pl) {
        ElMessage.warning('付费歌曲无法下载')
        return
    } else {
        ipcRenderer.send('donload', "http://music.163.com/song/media/outer/url?id=" + props.musicInfo.id + ".mp3")
    }
}
// 复制
async function copyToClipboard(text: string) {
    try {
        await navigator.clipboard.writeText(text);
        ElMessage.success('复制成功，可在浏览器中打开~')
    } catch (err) {
        ElMessage.warning('抱歉无法复制文本： ' + err);
    }
}
// 复制链接
const copyLink = () => {
    copyToClipboard("https://music.163.com/#/song?id=" + props.musicInfo.id)
}
// 分享
const openShare = () => {
    bus.emit('openShare', "https://music.163.com/#/song?id=" + props.musicInfo.id)
}
</script>
<style scoped lang='less'></style>